<template>
  <el-drawer
    :with-header="false"
    :visible="show"
    size="800px"
    @update:visible="updateVisable($event)"
  >
    <el-main>
      <el-button
        icon="el-icon-close"
        circle
        style="float: right"
        @click="updateVisable(false)"
      />
      <description
        title="订单信息"
        :items="orderProps"
        :span="24"
        style="margin-top: 16px"
      />
      <div class="batch-title" :if="orderGoodsProps">订单商品</div>
      <el-card
        shadow="hover"
        v-for="orderGoods in orderGoodsProps"
        :key="orderGoods.id"
        class="order-block"
        :if="orderGoodsProps"
      >
        <img :src="orderGoods.img" class="goods-image"/>
        <description :items="orderGoods.props" :span="24"/>
      </el-card>
    </el-main>
  </el-drawer>
</template>
<script>
import Description from "@/components/description/index.vue";
import {Status} from "@/utils/constant/orderStatus";
import { parseTime } from "@/utils/common.js";
import {PayWay} from "@/utils/constant/payWay";

export default {
  components: {
    description: Description
  },
  props: {
    // 是否显示, 支持 sync
    show: {
      type: Boolean,
      default: false
    },
    order: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    orderProps() {
      const result = [];
      console.log(this.order);
      if (this.order) {
        result.push({
          label: "订单编号",
          text: this.order["orderNo"]
        });
        result.push({
          label: "订单金额",
          text: this.order["money"]/100+'元'
        });
        if(this.order['normalReductionMoney']){
          result.push({
            label: "普通减免金额",
            text: this.order["normalReductionMoney"]/100+'元'
          });
        }
        if(this.order['memberReductionMoney']){
          result.push({
            label: "超级会员减免金额",
            text: this.order["memberReductionMoney"]/100+'元'
          });
        }
        if(this.order['integralReductionMoney']){
          result.push({
            label: "积分减免金额",
            text: this.order["integralReductionMoney"]/100+'元'
          });
        }
        if(this.order['couponReductionMoney']){
          result.push({
            label: "优惠卷减免金额",
            text: this.order["couponReductionMoney"]/100+'元'
          });
        }
        result.push({
          label: "支付金额",
          text: this.order["payMoney"]/100+'元'
        });
        const delivery = this.order['delivery'];
        result.push({
          label: "自提/配送",
          text: delivery.type==1?'自提':'配送'
        });
        result.push({
          label: "联系人姓名",
          text: delivery.name
        });
        result.push({
          label: "联系人电话",
          text: delivery.phone
        });
        if(delivery.type==1){
          result.push({
            label: "自提地址",
            text: delivery.address
          });
          result.push({
            label: "自提时间",
            text: delivery.consigneeTime
          });
        }else{
          result.push({
            label: "配送地址",
            text: delivery.address
          });
        }
        result.push({
          label: "支付方式",
          text: PayWay[this.order["payWay"]-1]['name']
        });
        result.push({
          label: "状态",
          text: Status[this.order["status"]]["name"]
        });
        if(this.order["status"]==2){
          result.push({
            label: "支付时间",
            text: parseTime(this.order["payTime"])
          });
        }
        result.push({
          label: "创建时间",
            text: parseTime(this.order["createTime"])
        });
        result.push({
          label: "最后修改时间",
            text: parseTime(this.order["updateTime"])
        });
        if(this.order["remark"]){
          result.push({
            label: "备注",
            text: this.order["remark"]
          });
        }
      }
      return result;
    },
    orderGoodsProps() {
      const result = [];
      const goodsList = this.order['goodsList'];
      if(goodsList){
        for(const goods of goodsList){
          goods.img = '/upload/'+goods.image;
          goods.props = [];
          goods.props.push({label:'名称',text:goods.name});
          if(goods['skuList']&&goods['skuList'].length>0){
            for(const sku of goods['skuList']){
              goods.props.push({label:sku.skuName,text:sku.skuValue});
            }
          }
          if(goods.remark){
            goods.props.push({label:'备注',text:goods.remark});
          }
          goods.props.push({label:'价格',text:(goods.money/100)+'元'});
          goods.props.push({label:'数量',text:goods.amount});
          result.push(goods);
        }
      }
      return result;
    }
  },
  methods: {
    updateVisable(v) {
      this.$emit("update:show", v);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  overflow: scroll;
}
.batch-title {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.batch-block {
  margin-bottom: 16px;
}
.goods-image{
  width: 100px;
  height: 100px;
}
</style>
